<template>
  <div ref="line" class="charts chart-line"></div>
</template>

<script>
import echarts from "echarts";
import tdTheme from "./theme.json";
echarts.registerTheme("tdTheme", tdTheme);
export default {
  name: "ChartLine",
  props: {
    value: Array,
    date: Array
  },
  mounted() {
    let dom = echarts.init(this.$refs.line);
    this.$nextTick(() => {
      let legend = this.value.map(_ => _.name);
      let seriesData = [];
      this.value.forEach(item => {
        var seriesObj = {};
        seriesObj.name = item.name;
        seriesObj.type = "line";
        seriesObj.markLine = {
          silent: true,
          animation: true,
          silent: true,
          lineStyle: {
            normal: {
              color: "red" // 这儿设置安全基线颜色
            }
          },
          data: [
            {
              yAxis: "40"
            }
          ],
          label: {
            normal: {
              formatter: "预警值" // 这儿设置安全基线
            }
          }
        };
        seriesObj.data = item.value;
        seriesData.push(seriesObj);
      });
      //格式化提示信息
      let tooltipForamtte = "{b}日<br/>";
      this.value.forEach((item, index) => {
        tooltipForamtte += `{a${index}}:{c${index}}<br/>`;
      });
      let option = {
        tooltip: {
          trigger: "axis",
          formatter: tooltipForamtte,
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow" // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: legend,
          textStyle: {
            color: "#fff"
          },
          right: 10
        },
        grid: {
          left: "5%",
          bottom: "3%",
          containLabel: true
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: [...this.date],
          //设置X轴的颜色
          axisLine: {
            lineStyle: {
              color: "#696969"
            }
          },
          //设置X轴文本的颜色
          axisLabel: {
            textStyle: {
              color: "#fff"
            }
          }
        },
        yAxis: {
          type: "value",
          splitNumber: 3,
          axisLine: {
            lineStyle: {
              color: "#fff",
              opacity: 0
            }
          },
          splitLine: {
            lineStyle: {
              color: "#696969"
            }
          }
        },
        series: [...seriesData]
      };
      // let  = echarts.init(document.getElementById("pie"), "tdTheme");
      dom.setOption(option);
    });
  }
};
</script>

<style lang="less">
.chart-line {
  min-height: 280px;
}
</style>
